<template>    
    <div>
        <div>
            <div style="height:30px;">
                <!-- <el-button size="small" @click="addRoleDialog" icon="el-icon-zoom-in"  type="success"  style="float: left;margin-left: 50px;" >添加菜单</el-button>        -->
            </div>
        </div>
        <el-divider></el-divider>  
        <div>
            <el-row :gutter="20">
                <el-col :span="8">
                    <h2>菜单管理</h2>
                    <div style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
                        <el-tree
                            ref="tree"
                            :data="data"
                            node-key="menuId"
                            :default-expanded-keys="treeExpandData" 
                            :expand-on-click-node="false"
                            @node-click="showNode"
                            @check-change="handleCheckChange"
                            :props="defaultProps"
                            draggable>
                            <span class="custom-tree-node show-hide" slot-scope="{ node, data }">
                                
                                <span>
                                    <i v-if="data.menuType==1" class="el-icon-folder-opened"></i>
                                    <i v-else-if="data.menuType==2" class="el-icon-document-remove"></i>
                                    <i v-else-if="data.menuType==3" class="el-icon-thumb"></i>
                                {{ node.label }}
                                </span>
                                <span style="display:none">
                                    <i v-if="data.menuType !=3" @click="() => appendNode(node, data)" class="el-icon-folder-add" title="增加"></i><!--增加节点-->
                                    <!-- 根节点不需要删除和修改 -->
                                    <i @click="() => deleteNode(node,data)" class="el-icon-delete" title="删除"></i><!--删除节点-->
                                    <i @click="() => editNode(node,data)" class="el-icon-edit" title="编辑"></i><!--编辑节点-->
                                    <i @click="() => removeNode(node,data)" class="el-icon-sort" title="移动"></i><!--编辑节点-->
                                </span>
                            </span>
                        </el-tree>
                    </div>
                </el-col>
                <!-- <el-divider direction="vertical"></el-divider> -->
                <el-col :span="14" :push="1">
                    <el-descriptions title="菜单信息">
                        <el-descriptions-item label="菜单名称">{{menuData.menuName}}</el-descriptions-item>
                        <el-descriptions-item label="菜单状态" v-if="menuData.states===1">
                            <el-tag size="small">可用</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="菜单状态" v-else>
                            <el-tag size="small" type="danger">禁用</el-tag>
                        </el-descriptions-item>    
                        <el-descriptions-item label="显示状态" v-if="menuData.displayStates===1">
                            <el-tag size="small">显示</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="显示状态" >
                            <el-tag size="small" type="danger">隐藏</el-tag>
                        </el-descriptions-item>                                             
                        <el-descriptions-item label="菜单类型" v-if="menuData.menuType===1">
                            <el-tag size="small">目录</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="菜单类型" v-else-if="menuData.menuType===2">
                            <el-tag size="small" type="success">菜单</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="菜单类型" v-else>
                            <el-tag size="small" type="warning">按钮</el-tag>
                        </el-descriptions-item>                                                
                        <el-descriptions-item label="创建时间">{{menuData.createTime}}</el-descriptions-item>
                        <el-descriptions-item label="组件路径">{{menuData.componentPath}}</el-descriptions-item>
                        <el-descriptions-item label="权限标识">{{menuData.authorityLogo}}</el-descriptions-item>                        
                        <el-descriptions-item label="URL地址">{{menuData.openAddress}}</el-descriptions-item>
                    </el-descriptions>  
                    <el-divider></el-divider>     
                    <el-descriptions title="操作信息">
                        <el-descriptions-item label="菜单名称">{{menuData.menuName}}</el-descriptions-item>
                        <el-descriptions-item label="菜单状态" v-if="menuData.states===1">
                            <el-tag size="small">可用</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="菜单状态" v-else>
                            <el-tag size="small" type="danger">禁用</el-tag>
                        </el-descriptions-item>    
                        <el-descriptions-item label="显示状态" v-if="menuData.displayStates===1">
                            <el-tag size="small">显示</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="显示状态" >
                            <el-tag size="small" type="danger">隐藏</el-tag>
                        </el-descriptions-item>                                              
                        <el-descriptions-item label="菜单类型" v-if="menuData.menuType===1">
                            <el-tag size="small">目录</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="菜单类型" v-else-if="menuData.menuType===2">
                            <el-tag size="small" type="success">菜单</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="菜单类型" v-else>
                            <el-tag size="small" type="warning">按钮</el-tag>
                        </el-descriptions-item>                                                
                        <el-descriptions-item label="创建时间">{{menuData.createTime}}</el-descriptions-item>
                        <el-descriptions-item label="组件路径">{{menuData.componentPath}}</el-descriptions-item>
                        <el-descriptions-item label="权限标识">{{menuData.authorityLogo}}</el-descriptions-item>                        
                        <el-descriptions-item label="URL地址">{{menuData.openAddress}}</el-descriptions-item>
                        <el-descriptions-item label="文件地址">{{menuData.filePath}}</el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>
        </div>
        <!-- 添加菜单弹窗 -->
        <div>
            <el-dialog title="添加菜单"  :visible.sync="addMenuVisible"  :close-on-click-modal="false" center  >
                <el-divider></el-divider>
                <el-form ref="formAddMenu" :model="formAddMenu" :rules="formAddMenuRules" center>
                <el-form-item label="上级菜单" label-width="140px" >
                    <el-input v-model="formAddMenu.parentMenu"  disabled ></el-input>
                </el-form-item>                    
                <el-form-item label="菜单名称" label-width="140px" prop="menuName">
                    <el-input v-model="formAddMenu.menuName" placeholder=" 请输入菜单名称" ></el-input>
                </el-form-item>  
                <el-form-item label="菜单类型" label-width="140px" prop="menuType">
                    <el-radio-group v-if="formAddMenu.menuType == 1" v-model="formAddMenu.menuType">
                        <el-radio :label="1">目录</el-radio>
                        <el-radio :label="2">菜单</el-radio>
                        <el-radio :label="3" disabled>按钮</el-radio>
                    </el-radio-group>
                    <el-radio-group v-else-if="formAddMenu.menuType == 2" v-model="formAddMenu.menuType">
                        <el-radio :label="1" disabled>目录</el-radio>
                        <el-radio :label="2" disabled >菜单</el-radio>
                        <el-radio :label="3" >按钮</el-radio>
                    </el-radio-group>
                    <el-radio-group v-else-if="formAddMenu.menuType == 3" v-model="formAddMenu.menuType">
                        <el-radio :label="1" disabled>目录</el-radio>
                        <el-radio :label="2" disabled>菜单</el-radio>
                        <el-radio :label="3" >按钮</el-radio>
                    </el-radio-group>                    
                </el-form-item>
                <el-form-item label="显示状态" label-width="140px" prop="displayStates">
                    <el-select v-model="formAddMenu.displayStates" placeholder="请选择显示状态" >
                        <el-option label="显示" value="1"></el-option>
                        <el-option label="隐藏" value="0"></el-option>
                    </el-select>
                </el-form-item>                                 
                <el-form-item label="权限标识" label-width="140px" prop="authorityLogo">
                    <el-input v-model="formAddMenu.authorityLogo" placeholder=" 请输入权限标识" ></el-input>
                </el-form-item>  
                <el-form-item label="组件路径" label-width="140px" prop="componentPath">
                    <el-input v-model="formAddMenu.componentPath" placeholder=" 请输入组件路径" ></el-input>
                </el-form-item> 
                <el-form-item label="URL地址" label-width="140px" prop="openAddress">
                    <el-input v-model="formAddMenu.openAddress" placeholder=" 请输入URL地址" ></el-input>
                </el-form-item>                                                  
                <el-form-item label="文件地址" label-width="140px" prop="filePath">
                    <el-input v-model="formAddMenu.filePath" placeholder=" 请输入文件地址" ></el-input>
                </el-form-item>                                                  
                <el-form-item label="菜单状态" label-width="140px" prop="states">
                    <el-select v-model="formAddMenu.states" placeholder="请选择菜单状态">
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="停用" value="0"></el-option>
                    </el-select>
                </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="addMenuVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="saveMenu">确 定</el-button>
                </div>
            </el-dialog>
        </div>  
        <!-- 修改菜单名称 -->
        <div>
            <el-dialog title="修改菜单"  :visible.sync="updateMenuVisible"  :close-on-click-modal="false" center  >
                <el-divider></el-divider>
                <el-form ref="updateMenu" :model="updateMenu" :rules="formAddMenuRules" center>
                <el-form-item label="菜单名称" label-width="140px" prop="menuName">
                    <el-input v-model="updateMenu.menuName" placeholder=" 请输入菜单名称" ></el-input>
                </el-form-item>  
                <el-form-item label="菜单类型" label-width="140px" prop="menuType">
                    <el-radio-group v-model="updateMenu.menuType">
                        <el-radio :label="1">目录</el-radio>
                        <el-radio :label="2">菜单</el-radio>
                        <el-radio :label="3">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="显示状态" label-width="140px" prop="displayStates">
                    <el-select v-model="updateMenu.displayStates" placeholder="请选择显示状态" >
                        <el-option label="显示" :value="1"></el-option>
                        <el-option label="隐藏" :value="0"></el-option>
                    </el-select>
                </el-form-item>                                 
                <el-form-item label="权限标识" label-width="140px" prop="authorityLogo">
                    <el-input v-model="updateMenu.authorityLogo" placeholder=" 请输入权限标识" ></el-input>
                </el-form-item>  
                <el-form-item label="组件路径" label-width="140px" prop="componentPath">
                    <el-input v-model="updateMenu.componentPath" placeholder=" 请输入组件路径" ></el-input>
                </el-form-item> 
                <el-form-item label="URL地址" label-width="140px" prop="openAddress">
                    <el-input v-model="updateMenu.openAddress" placeholder=" 请输入URL地址" ></el-input>
                </el-form-item>                                                  
                <el-form-item label="文件地址" label-width="140px" prop="filePath">
                    <el-input v-model="updateMenu.filePath" placeholder=" 请输入文件地址" ></el-input>
                </el-form-item>                                                  
                <el-form-item label="菜单状态" label-width="140px" prop="states">
                    <el-select v-model="updateMenu.states" placeholder="请选择菜单状态">
                        <el-option label="启用" :value="1"></el-option>
                        <el-option label="停用" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="updateMenuVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="updateMenuClick">确 定</el-button>
                </div>
            </el-dialog>
        </div>               
    
    </div>
</template>

<script>
import menu from '../../api/menu'

export default {
    name: "menus",
    data(){
        return{
            data: [],
            defaultProps: {
                id:'menuId',
                children: 'children',
                label: 'menuName'
            },
            treeExpandData:[119853844214895], //默认展开tree树id的数组
            //查看菜单
            menuData:{},

            //添加菜单
            addMenuVisible:false,
            formAddMenu:{
                parentMenu:'',
                menuType:'',
                path:'',
                parentId:'',
            },
            formAddMenuRules:{
                menuName: [{required:true, message:"请输入账户名称",trigger:'blur'}],
                authorityLogo: [{required:true, message:"请输入权限标识",trigger:'blur'}],
                menuType: [{required:true, message:"请输入菜单类型",trigger:'blur'}], 
                displayStates: [{required:true, message:"请输入显示状态",trigger:'blur'}], 
                states: [{required:true, message:"请输入菜单状态",trigger:'blur'}],
                componentPath: [{required:true, message:"请输入组件路径",trigger:'blur'}],
                openAddress: [{required:true, message:"请输入URL地址",trigger:'blur'}],
                filePath: [{required:true, message:"请输入文件地址",trigger:'blur'}],
            },
            //修改菜单
            updateMenuVisible:false,
            updateMenu:{},

        }
    },
    created(){
        this.queryAllMenu()
    },
    methods: {
        //获取所有菜单
        async queryAllMenu(){
            const res=await menu.queruAllMenu();
            if(res.data.code==='000'){
                this.data=res.data.data
            }
        },
        //获取当前菜单信息
        async queryMenuById(menuId){
            const res=await menu.queryMenuById({menuId:menuId});
            if(res.data.code === '000'){
                this.menuData=res.data.data
            }
        },
        // 新增树节点弹窗
        appendNode(node, data) {
            //当前节点是菜单，只能添加按钮
            if(data.menuType == 2){
                this.formAddMenu.menuType=3
            }else if(data.menuType == 3){
                this.formAddMenu.menuType=3
            }else if(data.menuType == 1){
                this.formAddMenu.menuType=1
            }
            //顶级父节点
            if(data.menuId == 119853844214895){
                this.formAddMenu.parentMenu=node.data.menuName
                this.formAddMenu.parentId=node.data.menuId;
                this.formAddMenu.path=node.data.parentId+','+node.data.menuId
                this.addMenuVisible=true;
            }else {
                this.formAddMenu.parentMenu=node.data.menuName
                this.formAddMenu.parentId=data.menuId;
                this.formAddMenu.path=node.parent.parent.data.menuId+','+data.parentId+','+data.menuId
                this.addMenuVisible=true;
            }

            try {
                this.$refs['formAddMenu'].resetFields()
            } catch (err) {

            }
        },
        //保存菜单
        saveMenu(){
            this.$refs.formAddMenu.validate((valid) => {
                if (valid) {
                    menu.saveMenu(this.formAddMenu).then(res =>{
                        if(res.data.code=== '000'){
                            this.$message.success("添加成功");
                            this.queryAllMenu();
                            this.addMenuVisible=false;
                        }else{
                        this.$message.error("添加失败")
                        }
                    })
                } else {
                    return false;
                }
            });            
        },
        //修改菜单信息弹窗
        editNode(node, data) {
            //获取当前菜单节点的信息
            menu.queryMenuById({menuId:data.menuId}).then(res =>{
                if(res.data.code === '000'){
                    this.updateMenu=res.data.data
                    this.updateMenuVisible=true;
                }
            })
        },
        //修改菜单
        updateMenuClick(){
            this.$refs.updateMenu.validate((valid) => {
                if (valid) {
                    menu.updateMenu(this.updateMenu).then(res =>{
                        if(res.data.code=== '000'){
                            this.$message.success("修改成功");
                            this.queryAllMenu();
                            this.updateMenuVisible=false;
                        }else{
                            this.$message.error("修改失败")
                        }
                    })
                } else {
                    return false;
                }
            });            
        },
        //删除菜单
        deleteNode(node,data){
            // console.log(data);
            if(data.children.length === 0){
                this.$confirm("确定删除菜单么？","提示",{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消'
                }).then(()=>{
                    
                })
                .catch(() =>{

                })
            }else{
                this.$confirm("您删除的菜单含有下级菜单，删除会将下级菜单全部删除！您确定都删除么？","提示",{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消'
                }).then(()=>{

                })
                .catch(() =>{
                    // console.log("取消了");
                })
            }

        },

        //点击节点获取该节点的详细信息
        showNode(data){
            this.queryMenuById(data.menuId);
        },
        handleCheckChange () {            
            let arr=this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
            // console.log(arr);
        },
    },

}
</script>

<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

.show-hide:hover :nth-child(2) {
    display: inline-block !important;
}
</style>